<script setup lang="ts">
import { ref, defineExpose } from "vue";
const drawer = ref(false);

const openDrawer = () => {
  drawer.value = true;
};
defineExpose({
  openDrawer
});
const columns = [
  {
    label: "指标",
    align: "center",
    prop: "name",
    minWidth: 200,
    showOverflowTooltip: true
  },
  {
    label: "计划",
    align: "center",
    prop: "money"
  },
  {
    label: "实际",
    align: "center",
    prop: "money1"
  },
  {
    label: "完成状态",
    align: "center",
    prop: "action",
    slot: "action",
    width: 160
  }
];
const tableData1 = [
  {
    name: "受训者基本掌握了培训内容",
    money: "108",
    money1: "108",
    action: 100
  },
  {
    name: "受训者应用培训所学，并反馈有所改善",
    money: "80",
    money1: "70",
    action: 87.5
  }
];
const statusClick = rate => {
  let status = "";
  if (rate <= 80) {
    status = "warning";
  } else if (rate > 80 && rate < 100) {
    status = "success";
  } else if (rate > 100) {
    status = "exception";
  }

  return status;
};
</script>

<template>
  <el-drawer
    v-model="drawer"
    title="项目目标实现情况"
    direction="rtl"
    size="600px"
  >
    <pure-table
      :data="tableData1"
      :columns="columns"
      stripe
      border
      :header-cell-style="{
        textAlign: 'center',
        background: '#f5f7fa'
      }"
    >
      <template #action="{ row }">
        <el-progress
          :text-inside="true"
          :stroke-width="15"
          stroke-linecap="butt"
          :percentage="row.action"
          :status="statusClick(row.action)"
        />
      </template>
    </pure-table>
  </el-drawer>
</template>

<style lang="scss" scoped>
:deep(.el-progress) {
  .el-progress-bar__outer {
    border-radius: 0;
    overflow-x: visible;
  }
  .el-progress-bar__inner {
    border-radius: 0;
  }
  &.is-exception {
    .el-progress-bar__innerText {
      right: 16px;
      position: relative;
    }
  }
}
</style>
